{% extends "base.html" %}

{% block content %}


<main class="row ">
    <div class="profile-block">

        <div class="profile">
            <img src={% if profile["images"] %}' {{ profile["images"][0]["url"] }}' {% else %}
            '/static/img/empty-profile.png' {% endif %}>
            <div class="profile-info">
                <a class="link data-block" href='#'>{{ profile['display_name'] }}</a>
                <div class="mini-data">
                    <div class="data-block">Subscribers : {{ profile['followers']['total'] }}</div>
                </div>
                <div class="data-block">{% if status %} {{ status }} {% else %} This user loves to listen to music and
                    does not like to set statuses. {% endif %}
                </div>
                <div class="pop-line">
                    <div class="pop pop-data"><a class="link" href="/me/edit">edit</a></div>
                </div>
            </div>
        </div>

        <div class="pop-line">
            <div class="pop pop-data"><a class="link" href="/stats/{{ profile['id'] }}/tracks/long">Statistics</a></div>
            <div class="pop pop-data">vk</div>
            <div class="pop pop-data">discord</div>
        </div>

        <div class="header">Favorite genres</div>
        <div class="pop-line">
            {% for genre in top_genres %}
            <div class="pop pop-data">{{ genre }}</div>
            {% endfor %}
        </div>
    </div>

    {% if playback %}
    <div class="playing-now">
        {% set track = playback['item'] %}
        <div>{% if playback['is_playing'] %} Listening now {% else %} Last time listened {% endif %}</div>
        {% if track['album'].get('images') %}
        <img src="{{ track['album']['images'][0]['url'] }}">
        <div>
            <div>{% for artist in track['artists'] %} <a href=" {{ artist['external_urls']['spotify'] }} " class="link"
                                                         target="_blank">{{artist['name']}}</a>{% if not loop.last %},
                {% endif %}
                {% endfor %} - <a href=" {{ track['external_urls']['spotify'] }} " class="link" target="_blank">{{
                    track['name'] }}</a></div>
            <div>Album: <a href="{{ track['album']['external_urls']['spotify'] }}" class="link" target="_blank">{{
                track['album']['name'] }}</a></div>
        </div>
        {% else %}
        <img src="/static/img/note.png">
        <div>
            <div>{% for artist in track['artists'] %} {{artist['name']}} {% if not loop.last %}, {% endif %}
                {% endfor %} - {{ track['name'] }}
            </div>
            <div>Album: {{ track['album'].get('name') }}</div>
        </div>
        {% endif %}

    </div>
    {% endif %}


    {% if top_track %}
    <div class="card"
         style="background-image: url('{{ top_track['album']['images'][0]['url'] }}');">
        <div class="blur">
            <div class="card_info">
                <p>Favourite Track</p>
            </div>
            <img src="{{ top_track['album']['images'][0]['url'] }}"
                 draggable="false">
            <div class="card_info">
                <p>{% for artist in top_track['artists'] %} <a href=" {{ artist['external_urls']['spotify'] }} "
                                                               class="link" target="_blank">{{artist['name']}}</a>{% if
                    not loop.last %}, {% endif %}
                    {% endfor %} - <a href=" {{ top_track['external_urls']['spotify'] }} " class="link" target="_blank">{{
                        top_track['name'] }}</a></p>
            </div>
        </div>

    </div>
    {% endif %}


    {% if top_artist %}
    <div class="card"
         style="background-image: url('{{ top_artist['images'][0]['url'] }}');">

        <div class="blur">
            <div class="card_info">
                <p>Favourite Artist</p>
            </div>
            <img src="{{ top_artist['images'][0]['url'] }}"
                 draggable="false">
            <div class="card_info">
                <p><a href=" {{ top_artist['external_urls']['spotify'] }} " class="link" target="_blank">{{
                    top_artist['name'] }}</a></p>
            </div>
        </div>

    </div>
    {% endif %}

</main>


{% endblock %}